<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    // This function takes a component...
    function withSubscription(WrappedComponent, selectData) {
        // ...and returns another component...
        return class extends React.Component {
            constructor(props) {
                super(props);
                this.handleChange = this.handleChange.bind(this);
                this.state = {
                    data: selectData(DataSource, props)
                };
            }

            componentDidMount() {
                // ... that takes care of the subscription...
//                DataSource.addChangeListener(this.handleChange);
            }

            componentWillUnmount() {
//                DataSource.removeChangeListener(this.handleChange);
            }

            handleChange() {
                this.setState({
                    data: selectData(DataSource, this.props)
                });
            }

            render() {
                // ... and renders the wrapped component with the fresh data!
                // Notice that we pass through any additional props
                return <WrappedComponent data={this.state.data} {...this.props} />;
            }
        };
    }
    // 组件工厂
    // const EnhancedComponent = higherOrderComponent(WrappedComponent);

    // correct solution
    function logProps(WrappedComponent) {
        return class extends React.Component {
            componentWillReceiveProps(nextProps) {
                console.log('Current props: ', this.props);
                console.log('Next props: ', nextProps);
            }
            render() {
                // Wraps the input component in a container, without mutating it. Good!
                return <WrappedComponent {...this.props} />;
            }
        }
    }

</script>
</body>
</html>

